<template>
  <div>
<!--    <h2>{{msg}}</h2>
    <h3>{{$store.state.count}}-{{count}}</h3>
    <h3>{{count}}</h3>-->
    <!--使用模块化用法-->
    <h4>{{$store.state.a.count}}</h4>
    <p>
      <!--$store.commit('add',10) 第一个参数是方法名，第二个参数是传的参数（可以理解为state 是默认参数不传）-->
      <button @click="$store.commit('add',10)">+</button>
      <button @click="reduce">-</button>
    </p>
    <p>
      <Button @click="addAction">+</Button>
      <Button @click="reduceAction">-</Button>
    </p>
  </div>
</template>

<script>
  // 引入仓库
  import store from '@/vuex/store'
  // 引入工具函数 获取 和改变状态
  import { mapState, mapMutations,mapGetters,mapActions} from 'vuex'
  export default {
    name: "count",
    data(){
      return{
        msg:'Hello Vuex'
      }
    },
    // 1.计算属性
/*    computed:{
      count(){
        return this.$store.state.count;
      }
    },*/
      // 2.es6 箭头函数写法
/*    coumputed:mapState({
      count:state=>state.count
    }),*/
    // es6 扩展运算符 计算属性只能写一个后面的会覆盖前面的，所以只能用es6的扩展运算符
    computed:{
      ...mapState(['count']),
      // ...mapGetters(['count'])
    },
    /*methods:mapMutations(['add','reduce']),*/
    methods:{
      ...mapMutations(['add','reduce']),
      ...mapActions(['addAction','reduceAction'])
    },
    store
  }
</script>

<style scoped>

</style>
